<template>
  <div class="balance-content">
    <header>
      <h2 class="card-num">卡号：1234567890 <span style="float: right;margin-right: .27rem;">129.00</span></h2>
      <div class="line"></div>
      <p>充值金额 <span style="float: right;margin-right: .27rem;">0.00</span></p>
      <p>赠送金额 <span style="float: right;margin-right: .27rem;">0.00</span></p>
      <p>充值后余额 <span style="float: right;margin-right: .27rem;">0.00</span></p>
    </header>

    <div class="weui-cells__title">储值充值</div>

    <div class="weui-cells">
      <div class="weui-flex">
        <div class="weui-flex__item choose-item choose-item-active">
          <div class="placeholder">
            <p style="font-size: .4rem">充值300元</p>
            <small style="font-size: .3rem">赠送60元</small>
          </div>
        </div>
        <div class="weui-flex__item choose-item" style="">
          <div class="placeholder">
            <p style="font-size: .4rem">充值1000元</p>
            <small style="font-size: .3rem">赠送300元</small>
          </div>
        </div>
      </div>

      <div class="weui-flex">
        <div class="weui-flex__item choose-item">
          <div class="placeholder">
            <p style="font-size: .4rem">充值2000元</p>
            <small style="font-size: .3rem">赠送700元</small>
          </div>
        </div>
        <div class="weui-flex__item choose-item" style="">
          <div class="placeholder">
            <p style="font-size: .4rem">充值3000元</p>
            <small style="font-size: .3rem">赠送1500元</small>
          </div>
        </div>
      </div>
    </div>


    <div class="weui-cells" style="display: none;">
      <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd" style="padding: .667rem;">
          <p style="text-align: center">该商户暂无优惠充值活动</p>
          <p style="text-align: center;margin-top: .27rem;">您可通过输入金额进行充值</p>
        </div>
      </div>
      <div class="weui-cell" style="font-size: .373rem">
        <div class="weui-cell__hd"><label class="weui-label">充值金额(元)</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" pattern="[0-9]*" placeholder="请输入需要充值的金额"/>
        </div>
      </div>
    </div>

    <div class="button-sp-area" style="margin-top: 1.067rem">
      <a href="javascript:;" class="weui-btn weui-btn_primary store-btn">购买充值卡</a>
    </div>

    <div class="weui-cells__title" style="font-size: .32rem;margin-top: 1.08rem;">
      <p>储值说明</p>
      <ul style="margin-left: 1.08rem;">
        <li>储值不支持提现</li>
        <li>赠送部分不予开取发票</li>
        <li>仅限本店及相关指定连锁店消费</li>
        <li>在法律允许范围内，本店对卡的使用规定做适当调整</li>
      </ul>
    </div>


    <div id="dialog1" style="display: none;">
      <div class="weui-mask"></div>
      <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title" style="font-size: 0.533333rem;color: #333">提示</strong>
        </div>
        <div class="weui-dialog__bd" style="font-size: 0.426667rem; color: #666">请输入充值金额</div>
        <div class="weui-dialog__ft">
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="color: #ff6600">我知道了</a>
        </div>
      </div>
    </div>

  </div>
</template>
<script>

  const utils = require('./../common/utils/utils')

  export default {
    data() {
      return {}
    },
    beforeCreate() {
      document.title = '购买充值卡'
    },
    created() {
    },
    methods: {}
  }
</script>
<style scoped>
  @import "~weui";

  .line{
    border-top:.027rem solid #949494;
    padding: .135rem;
    margin-top: .135rem;
  }
  .balance-contet {
    background-color: #f2f2f2;
    min-height: 17.787rem;
  }

  header {
    height: 2.4rem;
    background-color: #000;
    color: #fff;
    padding: .4rem;
  }

  .card-num {
    font-size: .427rem;
  }

  header .balance {
    font-size: 1.067rem;
    text-align: center;
    /*padding-top: .373rem;*/
  }

  .qrcode {
    padding-left: 1.067rem;
    font-size: .373rem;
  }

  .qrcode {
    background: url("./../assets/image/rmb.png") no-repeat 0 0;
  }

  .store-btn {
    /*background-color: #fff;*/
    /*color: #ff6600;*/
    /*border-color: #ff6600;*/
    width: 9.253rem;
    text-align: center;
    font-size: .427rem
  }

  .weui-flex__item {
    background: url("./../assets/image/bg-default.png") no-repeat 0 0;
    background-size: 100%;
  }

  .choose-item {
    padding: .20rem;
    margin: .5rem;
    height: 1.066667rem;
  }

  .choose-item-active {
    background: url("./../assets/image/bg-active.png") no-repeat 0 0;
    background-size: 100%;
  }
</style>
